<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- v-on 绑定多个事件 -->
    <div class="box">
        <!-- 一个元素绑定相同事件的不同事件 -->
        <!-- v-on:事件名='事件回调函数名 ,/; 事件回调函数名' -->
        <div class="box1" v-on:click="sameTest1();sameTest2()">相同事件的不同事件</div>
        <!-- 一个元素绑定不同事件 -->
        <!-- v-on="{click:sameTest1,mousemove:sameTest2}" key=事件类型 value = 事件回调函数名-->
        <div class="box2" v-on="{click:sameTest1,mousemove:sameTest2}">同一元素不同事件</div>
        <!-- 同一元素绑定多个不同事件的传参问题 分开写-->
        <div class="box3" @click="sameTest1('小明')" v-on:mousemove="sameTest2">
            传参
        </div>
    </div>
    <script>
        //创建一个vue实例对象
        let vm = new Vue({
            el:'.box',
            data:{

            },
            methods:{
                sameTest1(a){
                    console.log(111);
                    console.log(a)
                },
                sameTest2(){
                    console.log(222);
                }
            }
        })
    </script>
</body>
</html>